window.addEventListener('load', function () {
    // 解决点击延迟问题
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
    }
    // 1.获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var w = focus.offsetWidth;
    var ol = focus.children[1];
    var index = 0;
    var basefont = getComputedStyle(window.document.documentElement)['font-size'];
    basefont = basefont.split("px")[0];
    console.log(basefont);
    // 2. 利用定时器自动轮播图图片
    var timer = setInterval(function () {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex / basefont + 'rem)';
    }, 2000); // 这里一定要加分号
    // 等着我们过渡完成之后，再去判断 监听过渡完成的事件 transitionend
    ul.addEventListener('transitionend', function () {
        if (index >= 3) {
            index = 0;
            ul.style.transition = 'none';
            var translateX = -index * w;
            ul.style.transform = 'translateX(' + translateX / basefont + 'rem)';
        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            var translateX = -index * w;
            ul.style.transform = 'translateX(' + translateX / basefont + 'rem)';
        }
        // 3.小圆点跟随变化
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    })
    // 4.手指拖动轮播图
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
    })
    ul.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX - startX;
        ul.style.transition = 'none';
        var translateX = -index * w + moveX;
        ul.style.transform = 'translateX(' + translateX / basefont + 'rem)';
        flag = true; // 只有用户的手指移动了采取判断移动的距离
        e.preventDefault(); // 阻止屏幕移动
    })
    // 根据手指移动的距离 播放上一张或下一张的图片
    ul.addEventListener('touchend', function () {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                ul.style.transition = 'all .3s';
                var translateX = -index * w;
                ul.style.transform = 'translateX(' + translateX / basefont + 'rem)';
            } else {
                ul.style.transition = 'all .1s';
                var translateX = -index * w;
                ul.style.transform = 'translateX(' + translateX / basefont + 'rem)';
            }
        }
        // 手指离开后重新开始定时器
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex / basefont + 'rem)';
        }, 2000);
    })
    // // 返回顶部按钮
    // var goBack = document.querySelector('.goBack');
    // var nav = document.querySelector('nav');
    // window.addEventListener('scroll', function () {
    //     if (window.pageYOffset >= nav.offsetTop) {
    //         goBack.style.display = 'block';
    //     } else {
    //         goBack.style.display = 'none';
    //     }
    // })
    // goBack.addEventListener('click', function () {
    //     window.scroll(0, 0);
    // })
})